<template>
    <div class="product-list-container">
        <h2 class="section-title">商品列表管理</h2>
        
        <!-- 操作按钮区域 -->
        <div class="action-bar">
            <router-link to="/home/add">
                <el-button type="primary">添加商品</el-button>
            </router-link>
            <el-input v-model="searchQuery" placeholder="搜索商品" style="width: 220px; margin-left: 10px;" clearable @keyup.enter="searchProducts">
                <template #prefix>
                    <el-icon><search /></el-icon>
                </template>
            </el-input>
        </div>
        
        <!-- 商品表格 -->
        <el-table :data="allProducts" stripe style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="商品名称" width="150"></el-table-column>
            <el-table-column label="商品图片" width="120">
                <template #default="scope">
                    <el-image 
                        :src="getImageUrl(scope.row.image)" 
                        style="width: 60px; height: 60px;" 
                        :preview-src-list="[getImageUrl(scope.row.image)]"
                        fit="cover"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" width="100">
                <template #default="scope">
                    ¥{{ scope.row.price.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="80"></el-table-column>
            <el-table-column prop="description" label="商品描述">
                <template #default="scope">
                    <el-tooltip :content="scope.row.description" placement="top">
                        <div class="description-text">{{ scope.row.description }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editProduct(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="confirmDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- 分页组件，后端分页配置 -->
        <div class="pagination-container">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalItems"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
        
        <!-- 编辑商品弹窗 -->
        <el-dialog
            v-model="editDialogVisible"
            title="编辑商品"
            width="60%"
            destroy-on-close
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="handleDialogClose">
            <el-form :model="editForm" :rules="formRules" ref="editFormRef" label-width="100px" class="product-form">
                <!-- 商品名称 -->
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                
                <!-- 商品价格 -->
                <el-form-item label="商品价格" prop="price">
                    <el-input-number v-model="editForm.price" :precision="2" :step="0.1" :min="0" controls-position="right"></el-input-number>
                    <span class="form-item-tip">单位：元</span>
                </el-form-item>
                
                <!-- 商品库存 -->
                <el-form-item label="商品库存" prop="stock">
                    <el-input-number v-model="editForm.stock" :min="0" controls-position="right"></el-input-number>
                    <span class="form-item-tip">单位：件</span>
                </el-form-item>
                
                <!-- 商品图片 -->
                <el-form-item label="商品图片" prop="image">
                    <el-upload
                        class="product-image-uploader"
                        :action="null"
                        :http-request="handleUploadRequest"
                        :show-file-list="false"
                        :before-upload="beforeImageUpload">
                        <img v-if="editForm.image" :src="getImagePreview(editForm.image)" class="product-image">
                        <el-icon v-else class="upload-icon"><Plus /></el-icon>
                    </el-upload>
                    <span class="form-item-tip">建议尺寸：800x800像素，大小不超过2MB</span>
                </el-form-item>
                
                <!-- 商品描述 -->
                <el-form-item label="商品描述" prop="description">
                    <el-input 
                        v-model="editForm.description" 
                        type="textarea" 
                        :rows="4" 
                        placeholder="请输入商品描述，详细介绍商品特点与用途"
                    ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitEditForm">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <RouterView/>  
</template>

<script setup>
// 导入所需的API和Vue组合式API
import api from '@/assets/js/api.js';
import { ref, onMounted, computed, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 定义响应式数据
const allProducts = ref([]); // 所有商品数据
const loading = ref(true); // 加载状态
const searchQuery = ref(''); // 搜索关键词
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页条数
const totalItems = ref(0); // 总记录数
const editDialogVisible = ref(false); // 编辑弹窗是否可见
const editFormRef = ref(null); // 编辑表单引用

// 编辑表单数据
const editForm = reactive({
    id: null, // 商品ID
    name: '', // 商品名称
    price: 0, // 商品价格
    stock: 0, // 商品库存
    image: '', // 商品图片
    description: '' // 商品描述
});

// 表单验证规则
const formRules = {
    name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在2到50个字符之间', trigger: 'blur' }
    ],
    price: [
        { required: true, message: '请设置商品价格', trigger: 'blur' }
    ],
    stock: [
        { required: true, message: '请设置商品库存', trigger: 'blur' }
    ],
    description: [
        { required: true, message: '请输入商品描述', trigger: 'blur' },
        { min: 10, max: 500, message: '描述长度在10到500个字符之间', trigger: 'blur' }
    ]
};

// 获取商品列表数据
async function productList() {
    loading.value = true; // 设置加载状态
    try {
        // 如果 searchQuery 为空，则不传递 query 参数
        const params = {
            page: currentPage.value,
            pageSize: pageSize.value,
        };

        // 如果 searchQuery 有值，才添加 query 参数
        if (searchQuery.value) {
            params.query = searchQuery.value;
        }

        // 修改API调用，添加分页参数
        const result = await api.productWithPagination(params);

        if (result.code === 200) {
            allProducts.value = result.data.records; // 更新响应式数据
            totalItems.value = result.data.total; // 设置总记录数
            console.log('商品数据加载成功', allProducts.value);
        } else {
            ElMessage.error('获取商品数据失败: ' + result.message);
        }
    } catch (error) {
        console.error('请求商品列表异常:', error);
        ElMessage.error('获取商品列表失败，请稍后重试');
    } finally {
        loading.value = false; // 无论成功失败都关闭加载状态
    }
}

// 处理页码变化
function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    productList();
}

// 处理每页显示数量变化
function handleSizeChange(newSize) {
    pageSize.value = newSize;
    currentPage.value = 1; // 重置到第一页
    productList();
}

// 补全图片地址
function getImageUrl(imagePath) {
    if (!imagePath) return '';
    return `http://localhost:8080${imagePath}`;
}

// 获取编辑表单的图片预览
function getImagePreview(imagePath) {
    if (!imagePath) return '';
    
    // 如果是相对路径，添加域名前缀
    if (imagePath.startsWith('/uploads/')) {
        return `http://localhost:8080${imagePath}`;
    }
    
    return imagePath;
}

// 图片上传前的验证
function beforeImageUpload(file) {
    // 检查文件类型
    const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
    if (!isImage) {
        ElMessage.error('上传的图片只能是 JPG/PNG/GIF 格式!');
        return false;
    }
    
    // 检查文件大小，限制为2MB
    const isLessThan2M = file.size / 1024 / 1024 < 2;
    if (!isLessThan2M) {
        ElMessage.error('上传的图片大小不能超过 2MB!');
        return false;
    }
    
    return isImage && isLessThan2M;
}

// 自定义上传请求
async function handleUploadRequest(options) {
    try {
        const file = options.file;
        const result = await api.uploadFile(file);
        
        if (result.code === 200) {
            editForm.image = result.data.url; // 获取url
            ElMessage.success('图片上传成功!');
        } else {
            options.onError();
            ElMessage.error('图片上传失败: ' + result.message);
        }
    } catch (error) {
        options.onError();
        ElMessage.error('图片上传失败，请稍后重试');
    }
}

// 编辑商品
async function editProduct(product) {
    console.log('编辑按钮被点击，商品ID:', product.id); // 添加调试日志
    try {
        // 获取最新的商品数据
        const result = await api.getProductById(product.id);
        if (result.code === 200) {
            console.log('获取到商品详情:', result.data); // 添加调试日志
            // 填充编辑表单
            Object.assign(editForm, result.data);
            // 打开编辑弹窗
            editDialogVisible.value = true;
            console.log('弹窗状态:', editDialogVisible.value); // 添加调试日志
        } else {
            ElMessage.error('获取商品数据失败: ' + result.message);
        }
    } catch (error) {
        console.error('编辑商品出错:', error);
        ElMessage.error('获取商品信息失败，请稍后重试');
    }
}

// 处理弹窗关闭
function handleDialogClose(done) {
    ElMessageBox.confirm('确认关闭？未保存的数据将会丢失', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        done();
    }).catch(() => {});
}

// 提交编辑表单
async function submitEditForm() {
    console.log('提交编辑表单', editFormRef.value); // 添加日志

    if (!editFormRef.value) {
        console.error('表单引用不存在');
        ElMessage.warning('表单引用错误，请重试');
        return;
    }
    
    try {
        const valid = await editFormRef.value.validate();
        console.log('表单验证结果:', valid);
        
        if (valid) {
            try {
                console.log('准备提交的商品数据:', editForm);
                // 调用更新商品的API
                const response = await api.updateProduct(editForm);
                
                if (response.code === 200) {
                    ElMessage.success('商品更新成功!');
                    // 关闭弹窗
                    editDialogVisible.value = false;
                    // 重新加载列表
                    productList();
                } else {
                    ElMessage.error('商品更新失败: ' + response.message);
                }
            } catch (error) {
                console.error('更新商品出错:', error);
                ElMessage.error('系统错误，请稍后重试');
            }
        } else {
            ElMessage.warning('请完善商品信息');
            return false;
        }
    } catch (error) {
        console.error('表单验证错误:', error);
        ElMessage.warning('表单验证失败，请检查输入');
    }
}

// 确认删除
function confirmDelete(product) {
    ElMessageBox.confirm(
        `确定要删除商品 "${product.name}" 吗？`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteProduct(product.id);
    }).catch(() => {
        ElMessage.info('已取消删除');
    });
}

// 删除商品
async function deleteProduct(id) {
    try {
        // 调用删除商品的API
        const response = await api.deleteProduct(id);
        
        if (response.code === 200) {
            ElMessage.success('商品删除成功');
            // 重新加载列表
            productList();
        } else {
            ElMessage.error('商品删除失败: ' + response.message);
        }
    } catch (error) {
        console.error('删除商品出错:', error);
        ElMessage.error('系统错误，请稍后重试');
    }
}

function searchProducts() {
    console.log('搜索函数触发');
    currentPage.value = 1; // 搜索时重置为第一页
    productList(); // 重新请求数据
}

// 组件挂载时自动调用productList方法
onMounted(() => {
    console.log('商品列表组件已挂载');
    productList(); // 自动调用获取数据方法
    
    // 测试弹窗功能是否正常
    console.log('初始弹窗状态:', editDialogVisible.value);
});
</script>

<style scoped>
.product-list-container {
    padding: 20px;
}

.section-title {
    font-size: 20px;
    color: #303133;
    margin-bottom: 20px;
    border-left: 4px solid #409EFF;
    padding-left: 10px;
}

.action-bar {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.description-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* 编辑弹窗样式 */
.form-item-tip {
    margin-left: 10px;
    color: #909399;
    font-size: 12px;
}

.product-image-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.3s;
}

.product-image-uploader:hover {
    border-color: #409EFF;
}

.product-image {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: cover;
}

.upload-icon {
    font-size: 28px;
    color: #8c939d;
    width: 40px;
    height: 40px;
}
</style>